<template>
  <div>
    <el-breadcrumb separator="/" style="padding-bottom: 10px;">
      <el-breadcrumb-item>我的工作台</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>

    </el-breadcrumb>
    <el-table
      :data="orders"
      border
      style="width: 80%;margin-top: 20px;">
      <el-table-column
        prop="id"
        label="ID"
      >
      </el-table-column>
      <el-table-column
        prop="totalAmount"
        label="总金额"
      >
      </el-table-column>
      <el-table-column
        prop="createdAt"
        label="下单时间"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="detail(scope.row.id)">详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total,sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      :page-sizes="[10, 20, 40]"
      @current-change="goPage"
      :current-page.sync="pageable.pageNumber"
      :page-size="pageable.pageSize"
      :total="totalElements">
    </el-pagination>
  </div>
</template>

<script>
import orderService from '@/global/service/orderService';

export default {
  name: 'Order',
  data() {
    return {
      orders: [{}],
      pageable: {
        pageNumber: 1,
        pageSize: 10,
      },
      totalElements: 0,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    goPage(val) {
      console.log('current page:' + val)
      this.$route.query.page = val;
      this.getData();
    },
    handleSizeChange(val) {
      console.log(val)
      this.pageable.pageSize = val;
      this.getData();
    },
    getData() {
      const page = this.pageable.pageNumber - 1 || 0;
      const params = {
        page,
        size: this.pageable.pageSize,
      };
      orderService.getList(params)
        .then((res) => {
          this.orders = res.content;
          this.pageable.pageNumber = Number(res.pageable.pageNumber) + 1;
          this.pageable.pageSize = Number(res.pageable.pageSize);
          this.totalElements = res.totalElements;
        })
    },
    detail(id) {
      this.$router.push({name: 'OrderDetail', params: {id}})
    },
  },
}
</script>

<style scoped>

</style>
